<template>
	<view class="car-list">
		<view class="header-nav">
			<view class="tabs">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="search">
				<uni-easyinput prefixIcon="search" @confirm="searchQuery" type="text" confirmType="search"
					v-model="params.value" placeholder="请输入vin搜索" @iconClick="iconClick" @clear="clearQuery">
				</uni-easyinput>
			</view>

		</view>
		<view class="uni-padding-wrap content">
			<view v-if="current === 0 && list.length">
				<carList :item="item" v-for="item in list" :key="item.id" :name="name" @tap="navigator(item.id)"
					pageType="kg_todo">
				</carList>
			</view>
			<Empty style="height: 100%;" v-if="current === 0 && !list.length"></Empty>

			<view v-if="current === 1 && olist.length">
				<carList :item="item" v-for="item in olist" :key="item.id" :name="name" pageType="kg"></carList>
			</view>
			<Empty style="height: 100%;" v-if="current === 1 && !olist.length"></Empty>
		</view>
	</view>
</template>

<script>
import {
	GetListVehicleInfo,
	getListOverVehicleInfo
} from '@/api/app.js'
import carList from '@/components/testCar/index.vue'
import Empty from '@/components/empty/index.vue'
export default {
	components: {
		carList,
		Empty
	},
	data() {
		return {
			current: 0,
			items: ['待整备', '已完结'],
			styleType: 'button',
			activeColor: '#409Eff',
			params: {},
			list: [],
			list2: [],
			id: '',
			name: '',
			olist: [],
			olist2: []
		}
	},
	onShow() {
		this.id = uni.getStorageSync('id')
		this.name = uni.getStorageSync('name')
		this.init()
	},
	methods: {
		navigator(id) {
			// uni.navigateTo({
			// 	url: `/pages/carZb/info?id=${id}`
			// })
		},
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex
			}
		},
		async init() {
			let res = await GetListVehicleInfo({
				id: this.id
			})
			if (res.code == 0) {
				this.list = []
				this.list2 = []
			} else {
				this.list = res.data
				this.list2 = res.data
			}

			let ores = await getListOverVehicleInfo()
			if (ores.code == 0) {
				this.olist = []
				this.olist2 = []
			} else {
				this.olist = ores.data
				this.olist2 = ores.data
			}
		},
		iconClick(val) {
			console.log('iconClick', val);
		},
		searchQuery(val) {
			console.log(val, 'searchQuery');
			if (val) {
				if (this.current === 0) {
					this.list = this.list.filter(item => {
						return item.vin.includes(val)
					})
				} else {
					this.olist = this.olist.filter(item => {
						return item.vin.includes(val)
					})
				}
			}

		},
		clearQuery() {
			if (this.current === 0) {
				this.list = this.list2
			} else {
				this.olist = this.olist2
			}
		}
	}
}
</script>

<style scoped lang="scss">
.car-list {
	.header-nav {
		padding: 20rpx 0;
		background-color: #ffffff;

		.search {
			padding: 0 20rpx;
			margin-top: 10rpx;
		}

		.tabs {
			padding: 0 20rpx;
		}
	}



	.content {
		padding: 20rpx;
		max-height: calc(100vh - 230rpx);
	}
}
</style>